//尝试封装js组件,该组件要和后台方法（/common/upload/upload）一起使用（<input class="form-control file" id="file" name="file" type="file">）
(function ($) {
    "use strict";
    $.fn.fileUpload = function (options, param) {
        // 如果是调用方法
        if (typeof options === 'string') {
            return $.fn.fileUpload.methods[options](this, param);
        }

        // 如果是初始化组件
        options = $.extend({}, $.fn.fileUpload.defaults, options || {});
        this.fileinput(options);
        //上传成功后回调
        this.on("fileuploaded", function (event, data, previewId, index) {
            if (data.response.result === 'ok') {
                $.fn.fileUpload.uploadFiles.push({
                    path: data.response.filePath,
                    thumb: previewId
                });
                if (typeof options.uploadSuccess === "function") {
                    options.uploadSuccess(data.response.filePath);
                }
            } else {
                layer.msg(data.response.message + ',上传失败，请删除以后重新上传');
            }
        });
        //文件上传成功以后删除回调
        this.on("filesuccessremove", function (event, previewId) {
            console.log(previewId);
            var temp = [];
            var b = true;//如果图片一样，确保只删除一个
            $.fn.fileUpload.uploadFiles.forEach(function (item) {
                if (item.thumb === previewId && b) {
                    b = false;
                } else {
                    temp.push(item);
                }
            });
            $.fn.fileUpload.uploadFiles = temp;
        });

        //文件选择后回调
        var that = this;
        this.on('fileselect', function (event, numFiles, label) {
            if (options.isUpload) {
                that.fileinput('upload');//选择文件以后就上传
            } else {
                if (typeof options.uploadSuccess === "function") {
                    options.uploadSuccess(event.target.files.length > 0 ? event.target.files[0] : '');
                }
            }
        });

        //清除回调
        this.on('fileclear', function (event, numFiles, label) {
            $.fn.fileUpload.uploadFiles = [];
        });
    };

    $.fn.fileUpload.uploadFiles = [];

    // 组件方法封装........
    $.fn.fileUpload.methods = {
        getUploadFiles: function () {
            return $.fn.fileUpload.uploadFiles;
        }
    };

    $.fn.fileUpload.defaults = {
        theme: 'fas',
        language: 'zh',
        uploadUrl: '/common/upload/upload',//qcloud
        allowedFileExtensions: ['jpg', 'png', 'gif'],
        dropZoneTitle: '可将图片拖到这里',
        //该插件可以向您的服务器方法发送附加数据。这可以通过uploadExtraData在键值对中设置为关联数组对象来完成。所以如果你有设置uploadExtraData={id:'kv-1'}，在PHP中你可以读取这些数据$_POST['id']
        uploadExtraData: function (previewId, index) {
            return {};
        },
        uploadAsync: true, //默认异步上传
        showUpload: false, //是否显示上传按钮
        showRemove: false, //显示移除按钮
        dropZoneEnabled: false,//是否显示拖拽区域
        maxFileSize: 2048,//单位为kb，如果为0表示不限制文件大小
        minFileCount: 1, //每次上传允许的最少文件数。如果设置为0，则表示文件数是可选的。默认为0
        maxFileCount: 1, //每次上传允许的最大文件数。如果设置为0，则表示允许的文件数是无限制的。默认为0
        //已经上传的图片不允许删除如果是单个文件上传，可以获取上传的最后一个文件
        layoutTemplates: {
            actionDelete: ''
        },
        uploadSuccess: function (data) {
            console.log('uploadSuccess', data);
        },
        msgPlaceholder: '请选择文件',
        isUpload: true //是否上传文件到服务器上
    }
})(jQuery);